<template>
    <div class="">
        <div
            class="big-search"
            :style="{ backgroundImage: 'url(' + searchBj + ')' }"
        >
            <div class="big-search-div" @keydown="keydown">
                <el-input
                    v-model="searchInput"
                    class="search-input"
                    placeholder="请输入内容"
                    maxlength="60"
                ></el-input>

                <div class="search-button" @click="allSearch">
                    <i class="el-icon-search"></i>
                    搜索
                </div>
            </div>
        </div>

        <div class="index">
            <div class="left">
                <div class="introduce1">
                    <introduceModule
                        :type="2"
                        :introduce="introduce1"
                    ></introduceModule>
                </div>
                <div class="wx-code">
                    <img
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/fgk_wx_code.png"
                        alt="小竹财税APP"
                    />
                </div>

                <div class="link">
                    <div class="new-tabs">
                        <div class="title">国内导航</div>
                        <div class="new-switch">
                            <div
                                v-for="(item, index) in linkList"
                                :key="index"
                                class="new-tab"
                                :class="{
                                    'new-tab-active': linkIndex == index,
                                }"
                                @click="linkIndex = index"
                            >
                                {{ item.name }}
                            </div>
                        </div>
                    </div>

                    <div v-if="linkIndex == 0" class="list">
                        <a
                            v-for="(item, index) in chinatax"
                            :key="index"
                            class="item"
                            :href="item.link"
                            target="_blank"
                            rel="nofollow"
                        >
                            {{ item.region }}
                        </a>
                    </div>
                    <div v-else class="list">
                        <a
                            v-for="(item, index) in customs"
                            :key="index"
                            :style="{
                                width: index % 6 == 3 ? '75px' : '57px',
                            }"
                            class="item"
                            :href="item.link"
                            target="_blank"
                            rel="nofollow"
                        >
                            {{ item.region }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="right_top" v-loading="loading">
                    <div class="title">
                        <span>会员专享政策解读</span>
                        <div class="paixu" @click="changSort">
                            日期排序
                            <i
                                class="el-icon--right"
                                :class="[
                                    sort == '1'
                                        ? 'el-icon-arrow-down'
                                        : 'el-icon-arrow-up',
                                ]"
                            ></i>
                        </div>
                    </div>
                    <div class="list">
                        <div
                            v-for="(item, index) in dataList"
                            :key="index"
                            class="item"
                        >
                            <div
                                class="name"
                                target="_blank"
                                @click="goLink(item)"
                            >
                                {{ item.title }}
                            </div>
                            <div
                                v-html="getText(item.content, 90)"
                                class="introduce_txt"
                            ></div>
                            <div class="date">
                                <span
                                    >解读日期：{{
                                        getTime2(item.addtime * 1000)
                                    }}</span
                                >
                                <span>解读单位：小竹财税</span>
                            </div>
                        </div>
                    </div>

                    <div v-if="dataList.length == 0" class="">
                        <el-empty description="暂无内容"></el-empty>
                    </div>

                    <div class="pagination">
                        <el-pagination
                            background
                            layout="prev, pager, next, jumper"
                            :current-page="page"
                            :total="total"
                            :page-size="pageSize"
                            @current-change="changePage"
                        >
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import searchBj from "@/assets/images/regulations/TaxRevenue-bj.jpg";
// 介绍组件
import introduceModule from "@/components/introduce";

import { chinatax } from "@/assets/utils/regulation.js";
import { customs } from "@/assets/utils/regulation.js";

import { getText, getTime2, goTopSmooth } from "@/assets/utils/utils.js";

import { policy_interpretation_list } from "@/assets/api/regulationsApi.js";

import { getanalysedata2 } from "@/assets/api/indexApi.js";

import { mapState } from "vuex";

export default {
    async asyncData({ params, query }) {
        let data = {};
        return data;
    },
    head() {
        return {
            title: "会员专享政策解读-【小竹财税平台】",
            meta: [],
        };
    },
    layout: "home",
    components: {
        introduceModule,
    },
    data() {
        return {
            searchBj: searchBj,
            loading: false,
            searchInput: "",
            linkIndex: 0,
            linkList: [
                {
                    name: "税局",
                },
                {
                    name: "海关",
                },
            ],
            chinatax: null,

            customs: customs,
            dataList: [],
            total: 0,
            pageSize: 30,
            page: 1,

            getText: getText,
            getTime2: getTime2,

            sort: "1",
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        introduce1: function () {
            return {
                src: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/fgk-describe-bj.png",
                title: "",
                txt: "【财税政策解读】连接政策与经济主体的纽带。对企业，可助其利用优惠降成本、优决策、促发展；对个人，能指导合理规划财务。其重要性在于推动经济健康运行，保障企业成长和个人权益，促进社会经济协调发展。",
            };
        },
    },
    created() {},
    mounted() {
        this.chinatax = chinatax;
        this.policy_interpretation_list();

        getanalysedata2({
            m_id: 16,
            type: 1,
            describe: "政策解读",
            code: "PO2",
        });
    },
    watch: {},
    methods: {
        async policy_interpretation_list() {
            this.loading = true;
            const res = await policy_interpretation_list({
                page: this.page,
                pagesize: this.pageSize,
                sort: this.sort,
            });
            this.loading = false;
            if (res.code == 1) {
                this.dataList = res.data;
                if (res.data.length > 0) this.total = res.data[0].all_count;
                goTopSmooth();
            }
        },

        changSort() {
            this.page = 1;
            this.sort = this.sort == "1" ? "2" : "1";
            this.policy_interpretation_list();
        },

        async allSearch() {
            this.loading = true;
            const res = await policy_interpretation_list({
                keyword: this.searchInput,
                page: this.page,
                pagesize: this.pageSize,
            });
            this.loading = false;
            if (res.code == 1) {
                this.dataList = res.data;
                if (res.data.length > 0) this.total = res.data[0].all_count;
                goTopSmooth();
            }
        },
        keydown(e) {
            if (!e.shiftKey && e.keyCode == 13) {
                e.cancelBubble = true; //ie阻止冒泡行为
                e.stopPropagation(); //Firefox阻止冒泡行为
                e.preventDefault(); //取消事件的默认动作*换行
                //以下处理发送消息代码
                if (e.keyCode == 13) {
                    this.allSearch();
                }
            }
        },

        // 切换分页
        changePage(page) {
            this.page = page;
            this.policy_interpretation_list();
        },

        goLink(item) {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }

            if (this.userInfo.is_gpt_vip == 0) {
                this.$confirm("该功能仅限会员用户使用", "提示", {
                    confirmButtonText: "成为会员",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.set_payVipShow(true);
                    })
                    .catch(() => {});
                return;
            }
            this.$router.push({
                path: `/viponly/${item.id}.html`,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.big-search {
    height: 140px;
    width: 100%;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .high-search {
        font-size: 16px;
        color: #ffffff;
        line-height: 20px;
        transition: width 0.3s;
        overflow: hidden;
        white-space: pre;
        cursor: pointer;
        box-sizing: border-box;
        text-align: right;

        div {
            padding-left: 25px;
        }
    }
}

.big-search-div {
    display: flex;
    align-items: center;
    height: 55px;
    background-color: #ffffff;

    .left {
        text-align: center;
        width: 105px;
        height: 55px;
        line-height: 55px;
        cursor: pointer;
        user-select: none;
    }
    .kuohao {
        padding: 0 10px;
    }
    .search-input {
        border: none;
        width: 505px;

        &::v-deep .el-input__inner {
            border: none;
            // border-left: 1px solid #dfdfdf;
            border-radius: 0;
            font-size: 16px;
            // height: 26px;
            // list-style: 26px;
        }
    }

    .search-button {
        cursor: pointer;
        width: 133px;
        height: 55px;
        background: #004895;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 55px;

        i {
            font-size: 18px;
        }

        &:active {
            opacity: 0.8;
        }
    }
}

.index {
    width: 1200px;
    margin: 0 auto;
    margin-top: 22px;
    margin-bottom: 44px;
    display: flex;

    .left {
        width: 383px;

        .introduce {
            width: 383px;
            height: 218px;
        }

        .swiper {
            width: 383px;
        }

        .link {
            margin-top: 14px;
            background-color: #ffffff;
            position: sticky;
            top: 95px;
            .hot_read {
                top: 486px;
            }
        }

        .introduce-index {
            // position: sticky;
            // top: 153px;
        }

        .list {
            padding: 21px;
            padding-right: 0;
        }

        .item2 {
            display: inline-block;
            margin: 6px 0;
            font-size: 14px;
            color: #666666;

            &:hover {
                cursor: pointer;
                color: #1c87f3;
            }
        }

        .item {
            display: inline-block;
            width: 71px;
            margin: 6px 0;
            font-size: 14px;
            color: #666666;

            &:hover {
                // text-decoration: underline;
                cursor: pointer;
                color: #1c87f3;
            }
        }
    }

    .right {
        width: 100%;
        margin-left: 14px;

        .right_top {
            background-color: #ffffff;
        }

        .right_bottom {
            margin-top: 20px;
        }

        .title {
            border-bottom: 1px solid #f1f1f1;
            height: 69px;
            padding: 0 25px;
            font-size: 20px;
            font-weight: 500;
            color: #333333;

            display: flex;
            justify-content: space-between;
            align-items: center;

            .icon {
                width: 15px;
                height: 17px;
                margin-right: 7px;
            }

            .paixu {
                color: #606266;
                font-size: 14px;
                cursor: pointer;
                user-select: none;
            }
        }

        .list {
            padding-left: 28px;
            padding-right: 35px;
        }

        .item {
            display: block;
            padding: 20px 0;
            border-bottom: 1px solid #f4f4f4;
            color: #333333;

            // a {
            // display: flex;
            // align-items: center;
            // justify-content: space-between;

            // }

            .name {
                width: 640px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 16px;
                font-weight: 800;
                color: #000000;
                line-height: 50px;
                display: block;
                cursor: pointer;
                &:hover {
                    color: #1c87f3;
                    text-decoration: underline;
                }
            }

            .introduce_txt {
                // margin-top: 20px;
                font-size: 14px;
                font-weight: 400;
                color: #666666;
                line-height: 20px;
                overflow: hidden;
                // white-space: nowrap;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* 这里设置的是文本的最大行数 */
                -webkit-box-orient: vertical;
                width: 735px;
                height: 40px;

                &::v-deep p {
                    line-height: 20px !important;
                    white-space: break-spaces;
                }

                &::v-deep span {
                    line-height: 20px !important;
                    white-space: break-spaces;
                }

                &::v-deep a {
                    line-height: 20px !important;
                    white-space: break-spaces;
                }

                &::v-deep img {
                    display: none;
                }
            }

            .date {
                padding-top: 10px;
                font-size: 13px;
                color: #999999;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        }
    }
}

.introduce1 {
    width: 254px;
    height: 236px;
    margin-bottom: 20px;
}

.wx-code {
    margin-top: 15px;
    width: 383px;
    img {
        width: 383px;
        height: auto;
    }
}

.new-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px #e9e9e9 solid;
    padding: 15px 26px;

    .title {
        font-size: 20px;
        font-weight: 700;
    }

    .new-switch {
        display: flex;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        height: 28px;
        line-height: 28px;
        overflow: hidden;

        .new-tab {
            padding: 0 10px;
            font-size: 14px;
            cursor: pointer;
            color: #333333;
        }

        .new-tab-active {
            background-color: #1c87f3;
            color: #ffffff;
        }

        .new-tab:nth-child(1) {
            border-right: 1px solid #d9d9d9;
        }
    }
}

.pagination {
    text-align: center;
    padding: 20px 0;
}
</style>